<template>
    <div class="select-year" ref="selectYear">
        <div class="show-time year-month" @click="showSelectBox = true"><i class="el-icon-date"></i>{{checkTime}}</div>
        <div class="select-time-box" v-if="showSelectBox">
            <div class="box-head">
                <i class="el-icon-d-arrow-left" @click="toLast"></i>
                <p>{{firstItem}} 年 - {{lastItem}} 年</p>
                <i class="el-icon-d-arrow-right" @click="toNext"></i>
            </div>
            <div class="box-body">
                <div class="year-item" @click="selectYear(item)" :class="{today: item.toString() === nowTime.toString(), current: item.toString() === checkTime.toString()}" v-for="(item, index) in yearList" :key="index">
                    {{item}}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'index',
        props: ['yearMonth', 'notData'],
        data () {
            return {
                // 当前年
                nowTime: 0,
                // 中间年
                centerTime: 0,
                // 选中年
                checkTime: '',
                // 年份列表
                yearList: [],
                // 显示选择框
                showSelectBox: false,
                // 第一个年
                firstItem: 0,
                // 最后一个年
                lastItem: 0
            }
        },
        watch: {
            yearMonth () {
                if (this.yearMonth) {
                    this.checkTime = this.yearMonth.split('-')[0]
                }
            }
        },
        created () {
            this.nowTime = new Date().getFullYear()
            if (this.notData) {
                this.checkTime = this.yearMonth ? this.yearMonth.split('-')[0] : new Date().getFullYear()
            } else {
                this.checkTime = this.yearMonth ? this.yearMonth.split('-')[0] : ''
            }
            this.centerTime = this.nowTime
            this.initList()
        },
        mounted () {
            document.addEventListener('click', (e) => {
                if (this.$refs && this.$refs.selectYear && !this.$refs.selectYear.contains(e.target)) {
                    this.showSelectBox = false
                }
            })
        },
        methods: {
            /**
             * 初始化年份列表
             */
            initList () {
                this.firstItem = this.centerTime - 7
                this.lastItem = this.centerTime + 7
                this.firstItem = this.firstItem < 1900 ? 1900 : this.firstItem
                this.lastItem = this.lastItem > 2100 ? 2100 : this.lastItem
                this.yearList = []
                for (let i = this.firstItem; i <= this.lastItem; i++) {
                    this.yearList.push(i)
                }
            },
            /**
             * 选择年
             * @param val 选择的年
             */
            selectYear (val) {
                this.checkTime = val
                this.showSelectBox = false
                this.$emit('selectYear', `${val}-01-01`)
            },
            /**
             * 上一页年
             */
            toLast () {
                this.centerTime = this.centerTime - 15
                this.initList()
            },
            /**
             * 下一页年
             */
            toNext () {
                this.centerTime = this.centerTime + 15
                this.initList()
            }
        },
        beforeDestroy () {
            document.removeEventListener('click', null, false)
        }
    }
</script>

<style scoped lang="scss">
    .select-year {
        position: relative;
        height: 32px;
        .show-time {
            background: #fff;
            border: 1px solid #DCDFE6;
            border-radius: 4px;
            color: #1C2024;
            font-size: 13px;
            font-family: sans-serif;
            box-sizing: border-box;
            height: 32px;
            line-height: 32px;
            cursor: pointer;
            margin-top: 3px;
            &:hover {
                border-color: #C0C4CC;
            }
            .el-icon-date {
                font-size: 12px;
                margin: 0 6px 0 11px;
                color: #C0C4CC;
            }
        }
        .select-time-box {
            position: absolute;
            left: 0;
            top: 41px;
            z-index: 999;
            background: #fff;
            color: #606266;
            width: 320px;
            height: 285px;
            box-sizing: border-box;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
            border: 1px solid #dfe4ed;
            padding-bottom: 12px;
            .box-head {
                height: 55px;
                margin: 0 12px;
                box-sizing: border-box;
                border-bottom: 1px solid #e6ebf5;
                display: flex;
                justify-content: space-between;
                align-items: center;
                p {
                    margin: 0;
                    line-height: 54px;
                    text-align: center;
                    font-size: 16px;
                    font-weight: 500;
                }
                i {
                    cursor: pointer;
                    &:hover {
                        color: #1890ff;
                    }
                }
            }
            .box-body {
                display: flex;
                margin: 0 12px;
                justify-content: flex-start;
                align-items: center;
                flex-wrap: wrap;
                .year-item {
                    width: 20%;
                    text-align: center;
                    line-height: 72px;
                    cursor: pointer;
                    font-size: 12px;
                    &:hover {
                        color: #1890ff;
                    }
                    &.current {
                        color: #1890ff;
                    }
                    &.today {
                        color: #1890ff;
                        font-weight: bold;
                    }
                }
            }
        }
    }
</style>
